<template>
    <ElSelect filterable clearable :="$attrs" placeholder="">
        <ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </ElSelect>
</template>

<script setup lang="ts">

import { ref, onMounted, watch } from 'vue'
import { getKfList } from '../api'

interface Props {
    data: any;
}
const props = withDefaults(defineProps<Props>(), {
    data: () => ({}),
})

const options = ref<Array<{ label: string, value: string }>>([])

const getOptions = () => {
    if (props.data.companyNo) {
        getKfList({ companyNo: props.data.companyNo })
            .then(res => {
                options.value = res;
                console.log(options.value);
            })
    } else {
        options.value = []
    }
}

watch(() => props.data.companyNo, () => {
    getOptions();
})

onMounted(() => {
    getOptions()
})

</script>
